<!--  -->
<template>
<div style="width: 100%;height: 1900px;background: #F5F7F9;overflow: hidden">
    <div style="margin-left: 125px;font-size: 22px;font-weight: 550;margin-top: 10px">
        &nbsp;&nbsp;领用申请
    </div>
    <!--领用信息-->
    <div style="width: 75%;height: 500px;background: white;margin-left: 125px;margin-top: 15px;border-radius: 3px">
        <div style="margin-left: 0px;height: 60px;line-height: 60px;border-bottom: 2px solid #F5F7F9">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;领用信息
        </div>
        <div>
            <el-form label-width="120px" style="margin-left: 50px;margin-top: 30px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="领用单号">
                            <el-input v-model="form.spUsecode" placeholder="系统自动生成" disabled size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="申请时间">
                            <el-date-picker v-model="form.spUsetime" type="date" placeholder="请选择日期" size="large" style="width: 350px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="领用申请人">
                            <el-input v-model="form.applicant" disabled size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="领用类型">
                            <el-select v-model="form.useType" placeholder="请选择领用类型" size="large" style="width: 350px;">
                                <el-option label="设备维修" value="1"></el-option>
                                <el-option label="设备保养" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="工单类型">
                            <el-select v-model="form.workType" placeholder="请选择工单类型" size="large" style="width: 350px;" @change="workTypeChange">
                                <el-option label="设备保养" value="1"></el-option>
                                <el-option label="设备维修" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="领用主题">
                            <el-input v-model="form.spUsetheme" placeholder="请输入领用主题" size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="所在部门">
                            <el-input v-model="form.useDepartment" disabled size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="领用原因">
                            <el-select v-model="form.useReason" placeholder="请选择领用原因" size="large" style="width: 350px;">
                                <el-option label="松动" value="loose"></el-option>
                                <el-option label="漏气" value="leak"></el-option>
                                <el-option label="断裂" value="break"></el-option>
                                <el-option label="失灵" value="malfunction"></el-option>
                                <el-option label="磨损" value="wear"></el-option>
                                <el-option label="损坏" value="damage"></el-option>
                                <el-option label="改造" value="modification"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关联工单" v-if="form.workType == 1">
                            <el-select v-model="form.workId" placeholder="请选择关联工单" size="large" style="width: 350px;">
                                <el-option v-for="(item,index) in MainWorkOrder" :key="index" :label="item.orderNumber" :value="item.orderId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关联工单" v-if="form.workType == 2">
                            <el-select v-model="form.workId" placeholder="请选择关联工单" size="large" style="width: 350px;">
                                <el-option v-for="(item,index) in RepairOrder" :key="index" :label="item.orderNumber" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.useRemark" placeholder="请输入备注" :rows="3"  size="large" style="width: 960px;"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!--设备信息-->
    <div style="width: 75%;height: 300px;background: white;margin-left: 125px;margin-top: 45px;border-radius: 3px">
        <div style="margin-left: 0px;height: 60px;line-height: 60px;border-bottom: 2px solid #F5F7F9">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;设备信息
        </div>
        <div>
            <el-form label-width="120px" style="margin-left: 50px;margin-top: 30px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否关联设备">
                            <el-radio v-model="form.useDevice" label="1" value="1" @change="useDeviceChange">关联</el-radio>
                            <el-radio v-model="form.useDevice" label="2" value="2" @change="useDeviceChange">不关联</el-radio>
                        </el-form-item>
                        <el-form-item label="设备编号">
                            <el-input v-model="forms.equipmentNumber" disabled size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="设备类型">
                            <el-input v-model="forms.deviceTypeName" disabled size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设备名称" v-if="form.useDevice == 1">
                            <el-select v-model="form.deviceId"  size="large" style="width: 350px;" @change="deviceChange">
                                <el-option v-for="data in spareLedgerList" :key="data.archivesId" :label="data.devicename" :value="data.archivesId" ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备名称" v-if="form.useDevice == 2">
                            <el-select v-model="form.deviceId"  size="large" style="width: 350px;" @change="deviceChange" disabled>
                                <el-option v-for="data in spareLedgerList" :key="data.archivesId" :label="data.devicename" :value="data.archivesId" ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="规格型号">
                            <el-input v-model="forms.specificationsModels" disabled size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="存放位置">
                            <el-input v-model="forms.placeForStorage" disabled size="large" style="width: 350px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
    <!--备件明细-->
    <div style="width: 75%;height: 300px;background: white;margin-left: 125px;margin-top: 45px;border-radius: 3px">
            <div style="width: 100%;height: 60px;border-bottom: 3px solid #F5F7F9;line-height: 60px">
                &nbsp;&nbsp;&nbsp;&nbsp;备件明细
            </div>
            <div style="margin-left: 10px;margin-top: 20px">
                <el-button type="success" @click="dialogVisible=true">添加</el-button>
                <el-button @click="removeRows">移除</el-button>
            </div>
            <div style="margin-top: 10px">
                <el-table :data="form.spareList" style="width: 100%" @selection-change="associationSelection">
                    <el-table-column type="selection"  width="50"></el-table-column>
                    <el-table-column label="序号" width="50" prop="spId"></el-table-column>
                    <el-table-column prop="spName"  width="80" label="备件名称" align="center"></el-table-column>
                    <el-table-column prop="spCode" label="备件编码" align="center"></el-table-column>
                    <el-table-column prop="spSpecification" label="规格型号" align="center"></el-table-column>
                    <el-table-column prop="spTypeName" label="备件类型" align="center"></el-table-column>
                    <el-table-column prop="upperInventory" width="80" label="库存上限" align="center"></el-table-column>
                    <el-table-column prop="lowerInventory" width="80" label="库存下限" align="center"></el-table-column>
                    <el-table-column prop="totalInventory" width="80" label="当前库存" align="center"></el-table-column>
                    <el-table-column label="领用数量" align="center">
                        <template slot-scope="{row}">
                            <el-input-number v-model="row.useNumber" :min="row.lowerInventory" :max="row.totalInventory"></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
    </div>
    <!--关联文档-->
    <div style="width: 75%;height: 300px;background: white;margin-left: 125px;margin-top: 45px;border-radius: 3px"  >
        <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
            &nbsp;&nbsp;&nbsp;关联文档
        </div>
        <div>
            <el-upload
                    class="upload-demo"
                    action="http://localhost:8090/spare/api/uploadFile"
                    :multiple="true"
                    :on-success="handleSuccesss"
            >
                <el-button size="small" type="primary" style="position: relative;left: 18px;top: 10px">点击上传</el-button>
            </el-upload>
            <el-table :data="form.fileList" style="width: 100%;margin-top: 10px ">
                <el-table-column prop="name" label="文件名" align="center"></el-table-column>
                <el-table-column prop="url" label="文件URL" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog
            title="选择备件"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose">
        <div>
            <el-input v-model="formes.codeName" placeholder="请输入备件编号或备件名称" style="width: 180px"></el-input>
            <el-button @click="chongzhi" style="margin-left: 240px">重 置</el-button>
            <el-form ref="form" :model="formes" label-width="100px" style="margin-left: 100px;margin-top: -29px">
                <el-form-item label="">
                    <el-cascader
                            v-model="formes.spTypeId"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            clearable
                            expand-trigger="hover"
                            placeholder="请选择"
                    ></el-cascader>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="spareLists" style="width: 100%" @selection-change="associationSelections">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" width="80" prop="spId"></el-table-column>
            <el-table-column prop="spName" label="备件名称" align="center"></el-table-column>
            <el-table-column prop="spCode" label="备件编码" align="center"></el-table-column>
            <el-table-column prop="spSpecification" label="规格型号" align="center"></el-table-column>
            <el-table-column prop="spTypeName" label="备件类型" align="center"></el-table-column>
            <el-table-column prop="upperInventory" label="库存上限" align="center"></el-table-column>
            <el-table-column prop="lowerInventory" label="库存下限" align="center"></el-table-column>
            <el-table-column prop="totalInventory" label="当前库存" align="center"></el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                :current-page.sync="formes.page"
                :page-size="formes.pagesize"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                background
                layout="total, sizes ,prev, pager, next, jumper"
                style="padding: 30px 0; text-align: center"
                @current-change="selAllSpareLedger"
                @size-change="handleSizeChanges"
        />
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
             </span>
    </el-dialog>

    <!--最下面-->
    <div style="width: 100%;height: 50px;background: white;box-shadow: 0px -4px 4px rgb(226,228,229);position:fixed;top: 920px;z-index: 999">
        <div style="margin-left: 700px;margin-top: 15px">
            <el-button @click="closes">关闭</el-button>
            <el-button type="success" @click="okGos()">确认</el-button>
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    spareLists:[],
    total:0,
    //备件类型树形数据
    options:[],
    props: {
        value: 'spId',
        label: 'spTypename',
        children: 'children'
    },
    formes:{
        codeName:null,
        spTypeId:null,
        page:1,
        pageSize:10
    },
    dialogVisible:false,
    form: {
        deviceId:'',
        spUsecode: '',
        spUsetime: '',
        applicant: '张三',
        useApplicantid:1,
        useType: '',
        workType: '1',
        spUsetheme: '',
        useDepartment: '管理部门',
        useReason: '',
        workId: '',
        useRemark: '',
        useDevice:'1',
        spareList:[],
        fileList:[]
    },
    forms:{
        equipmentNumber:'',
        deviceTypeName:'',
        specificationsModels:'',
        placeForStorage:''
    },
    spareLedgerList:[],
    list:[],
    vals:[],
    //保养工单
    MainWorkOrder:[],
    //维修工单
    RepairOrder:[],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    useDeviceChange(val){
        if (val == 2){
            this.form.deviceId = ''
            this.forms = {}
        }
    },
    workTypeChange(val){
        if (val == 1){
            this.request.get("/maintenance/maintenance-work-order/selMainWorkOrder")
            .then(res=>{
                this.MainWorkOrder = res.data
            })
        }else {
            this.request.get("/maintenance/repair-order/selRepairOrders")
                .then(res=>{
                    this.RepairOrder = res.data
                })
        }
    },
    closes(){
        this.$router.push('/spareUse')
    },
    okGos(){
        this.request.post("/spare/spare-use/insertSpareUse",this.form)
        .then(res=>{
            this.$message({
                showClose: true,
                message: '添加成功',
                type: 'success'
            });
            this.$router.push('/spareUse')
        })
    },
    handleDelete(row) {
        this.$confirm(`确定删除文件 ${row.name} 吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.form.fileList.splice(this.form.fileList.indexOf(row), 1)
            this.$message.success('删除成功')
        })
    },
    handleSuccesss(response, file) {
        console.log(response)
        this.form.fileList.push({
            name: file.name,
            url: response[0]
        })
    },
    ok(){
        for (let i = 0; i < this.list.length; i++) {
            this.form.spareList.push(this.list[i])
        }
        this.dialogVisible = false
    },
    chongzhi(){
        this.formes.codeName = null
        this.formes.spTypeId = null
        this.selAllSpareLedger()
    },
    selAllSpareLedger(){
        this.request.post("/spare/spare-ledger/selAllSpareLedger",this.formes)
            .then(res=>{
                this.spareLists = res.data.items
                this.total = res.data.counts
            })
    },
    handleChange(value) {
        console.log(value)
    },
    associationSelections(val){
        this.list = val
    },
    associationSelection(val){
        this.vals = val
    },
    removeRows(){
        for (let i = 0; i < this.vals.length; i++) {
            for (let j = 0; j < this.form.spareList.length; j++) {
                console.log(this.form.spareList)
                if (this.vals[i].spId == this.form.spareList[j].spId){
                    this.form.spareList.splice(j, 1);
                    j = 0;
                }
            }
        }
    },
    //备件类型树形查询
    selAllSpareType(){
        this.request.get("/spare/spare-types/selAllSpareType")
            .then(res=>{
                this.options = res.data
            })
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
    },
    deviceChange(val){
        for (let i = 0; i < this.spareLedgerList.length; i++) {
            if (val == this.spareLedgerList[i].archivesId){
                this.forms = this.spareLedgerList[i]
            }
        }
    },
    getAllSpareLedger(){
        this.request.get("/device/equipment-archives/getAllDevice")
        .then(res=>{
            this.spareLedgerList = res.data
        })
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.formes.pagesize = pageSize;
        this.selAllSpareLedger();
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getAllSpareLedger()
    this.selAllSpareType()
    this.selAllSpareLedger()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>
